<template>
  <div>
    <div class="flex m-t-20 m-b-20">
      <el-input v-model="companyName" class="m-l-20 m-r-20" placeholder="请输入保险公司名称" />
      <div>
        <el-select v-model="inValue" placeholder="请选择险种" class="m-r-20">
          <el-option
            v-for="item in radioList"
            :key="item.id"
            :label="item.itemName"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" class="el-icon-edit" @click="getInsuranceList">查 询</el-button>
      </div>
    </div>
    <div>
      <el-table
        id="insurList"
        ref="insurList"
        class="con-table"
        type="expand"
        :data="radioList"
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column align="center" prop="name" label="公司Logo">
          <template slot-scope="scope">
            <el-image v-if="scope.row.id === 1" class="logo" :src="url1" />
            <el-image v-if="scope.row.id === 2" class="logo" :src="url2" />
            <el-image v-if="scope.row.id === 3" class="logo" :src="url3" />
            <el-image v-if="scope.row.id === 4" class="logo" :src="url4" />
          </template>
        </el-table-column>
        <template v-for="item in tablehead">
          <el-table-column v-if="item.isShow" :key="item.id" :width="item.width" align="center" :sortable="item.sortable" :show-overflow-tooltip="true" :prop="item.prop" :label="item.label" />
        </template>

        <el-table-column align="center" prop="name" label="保单号">
          <template slot-scope="scope">
            <span class="insuranceNumber" @click="handleClick">{{ scope.row.insuranceNumber }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="name" label="投保状态">
          <template slot-scope="scope">
            <span>{{ scope.row.state === 1 ? '已投保' : '未投保' }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column align="center" prop="name" label="基本操作">
          <template slot-scope="scope">
            <el-button class="defaultbtn" type="primary" plain size="mini" @click="handleEdit(scope.$index, scope.row)">
              <i class="el-icon-edit" />
              编辑</el-button>
            <el-button type="danger" class="defaultbtn" @click="handleDeleteBtn(scope.$index, scope.row)"><i class="el-icon-delete-solid" />删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-dialog :visible.sync="isShow">
        <el-image class="showImage" :src="url" lazy fit="fill" />
      </el-dialog>
    </div>
  </div>
</template>

<script>

import { insurQueryList } from '@/api/maintenance/miInsurance'
import { showNotice } from '@/utils/toolclass'

export default {
  data() {
    return {
      inValue: '',
      companyName: '',
      radioList: [],
      isShow: false,
      url: require('@/assets/maintenance/baodan.png'),
      url1: require('@/assets/insurance/zgpa.jpg'),
      url2: require('@/assets/insurance/zgrs.jpg'),
      url3: require('@/assets/insurance/tpy.jpg'),
      url4: require('@/assets/insurance/zgrm.jpg'),
      tablehead: [
        {
          index: 1,
          prop: 'companyName',
          label: '保险公司',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 2,
          prop: 'registerCode',
          label: '注册代码',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 3,
          prop: 'rescueCode',
          label: '位置码',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 4,
          prop: 'price',
          label: '保单价格（元）',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 5,
          prop: 'itemName',
          label: '购买险种',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ]
    }
  },
  created() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/operation/opInsurance/opInsuInquiry' }))
  },
  mounted() {
    this.getInsuranceList()
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow
    },
    getInsuranceList() {
      insurQueryList().then(res => {
        // console.log(res)
        if (res.code === '000000') {
          this.radioList = res.data
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/public.scss';
.showImage {
  width: 800px;
  height: 800px;
  margin: -80px 0 0 -200px;
}
.insuranceNumber {
  cursor: pointer;
  color: #0000ff;
}
.logo {
  width: 80px;
}
</style>
